<template>
  <div class="analyze-info">
    <el-card class="count">
      <div>
        <el-button
          type="warning"
          plain
          class="header"
          size="small"
          @click="$router.back()"
        ><i class="el-icon-back" /> 返回</el-button>
        <el-tag type="warning" class="header">店铺经营分析</el-tag>
      </div>
      <!-- 店铺信息 -->
      <div class="storeInfo">
        <el-row>
          <el-col :span="6">
            <p>店铺编号: {{ storeInfo.storeNum }}</p>
            <p>行业: {{ storeInfo.storeIndustryErinId | storeIndustryErins }}</p>
          </el-col>
          <el-col :span="12">
            <p>
              店铺名称: {{ storeInfo.storeName }} - {{ storeInfo.subStoreName }}
            </p>
            <p>联系电话: {{ storeInfo.storePhone }}</p>
          </el-col>
        </el-row>
      </div>
      <hr class="hrLine">
      <!-- 店铺销售情况 -->
      <div class="storeSales">
        <el-tag
          type="warning"
          class="header"
          style="margin-bottom: 16px"
        >店铺销售情况</el-tag>
        <el-row type="flex">
          <el-col>
            <!-- 日期 -->
            <div class="timer">
              <span class="demonstration">日期: </span>
              <el-date-picker
                v-model="timerValue"
                unlink-panels
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </el-col>
          <el-col class="salesCount">
            <el-row class="count" type="flex" justify="center">
              <el-col :span="6">
                <el-tag type="success">销售额：****元</el-tag>
              </el-col>
              <el-col :span="6">
                <el-tag type="success">总订单量：****元</el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 放置雷达图 -->
        <radar-sales />
      </div>
      <hr class="hrLine">
      <!-- 店铺消费情况 -->
      <div>
        <el-tag type="warning" class="header">店铺消费情况</el-tag>
        <!-- 放置雷达图 -->
        <radar-sales />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getStoreById } from '@/api/storeserin'
import RadarSales from '../radar-sales'

export default {
  name: 'Analyze',
  components: {
    RadarSales
  },
  props: {
    storeId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data() {
    return {
      storeInfo: {},
      timerValue: '' // 日期
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getStoreById()
  },
  mounted() {},
  methods: {
    async getStoreById() {
      const res = await getStoreById(this.storeId)
      this.storeInfo = res[0]
    }
  }
}
</script>

<style scoped lang="scss">
.count {
}
.el-card {
  margin: 10px 20px 0;
  .header {
    margin-right: 20px;
  }
  .timer,
  .storeInfo {
    padding-left: 40px;
  }

  .hrLine {
    margin: 20px 0;
  }
  .storeSales {
    .salesCount {
      line-height: 40px;
    }
  }
  .el-input {
    width: 80%;
  }
}
</style>
